<html>
<body>
 <div class=main>
    
     {include file='index/header'} 
      <link href="/static/swiper/swiper-bundle.min.css" rel="stylesheet">
      <style>
            .main{float:left;width:100%;box-sizing:border-box;padding-top:10px}
            .main .content{float:left;width:100%;}
            .main .section{float:left;width:100%;}
            .content .img {
                            width: 451px;
                            height: 451px;
                            float: left;
            }
            .mySwiper {
                            height: 20%;
                            box-sizing: border-box;
                            padding: 10px 0;
                            margin-top: 10px;
            }
            
            .mySwiper img {
                            display: block;
                            width: auto;
                            height: 100%;
            }
            
            .content .de {
                            margin-left: 36px;
                            float: left;
                            width: calc(100% - 500px);
            }
            .content .de .mtit {
                            font-size: 35px;
                            font-family: "AvantGarde";
                            text-transform: uppercase;
                            text-align: left;
                            line-height: 35px;
                            float: left;
                            font-weight: bold;
                            width: 100%;
            } 
            .content .de .mtit1{
                            float: left;
                            width: 100%;
                            color: rgb(0, 56, 101);
                            font-size: 18px;
            }
            .content .de .mlist {
                            float: left;
                            width: 100%;
            }
            .content .de .list {
                            float: left;
                            width: 100%;
                            padding-top:20px;
                            padding-bottom:20px;
            }
            
            .content .de .list .item{
                float: left;
                width: 50%;
                line-height:25px
            }
            #mark{
                
                padding: 10px;
                box-sizing: border-box;
            }
            
            #mark li{width:100%;line-height:30px}
            .review_btn{float:left;background-color: rgb(0, 56, 101);padding-left:20px;padding-right:20px;line-height:30px;height:30px;font-size:16px}
            
            .flist{float:left;width:100%;padding-top:20px;padding-bottom:20px;}
            .flist li{float:left;width:100%;}
            .flist li .slist{float:left;}
            .flist li .slist span{float:left;line-height:30px;margin-left:30px}
            .flist .m{width:120px;text-align:center}
      </style>
    <div class=content style="margin-top:30px;padding:30px;box-sizing:border-box">
        <div class=section>
            <div class=img>
                
             <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff;z-index:999" class="swiper mySwiper2" >
      <div class="swiper-wrapper">
          {foreach $infor.slider as $k=>$v}
          <div class="swiper-slide"><img src="{$v}" /></div>
          {/foreach}
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    
    <div thumbsSlider="" class="swiper mySwiper">
      <div class="swiper-wrapper">
          
          {foreach $infor.slider as $k=>$v}
          <div class="swiper-slide"><img src="{$v}" /></div>
          {/foreach}
       
      </div>
    </div>

    
            </div>
            <div class=de>
              <div class="mtit">{$infor.no}</div> 
              <div class=mtit1 style="line-height:30px;border-bottom:2px solid rgb(0, 56, 101)">
                  <span style="float:left;">{$infor.ename}</span>
                  <span style="float:left;margin-left:50px">{$infor.name}</span>
              </div>
              <div class=flist>
                  <table class=layui-table>
                      <tbody>
                          <tr><td class="m">Material：</td><td>{$infor.ematerial}</td><td class="m">材质：</td><td>{$infor.material}</td></tr>
                          <tr><td class="m">Size：</td><td>{$infor.esize}</td><td class="m">尺寸：</td><td>{$infor.size}</td></tr>
                          <tr><td class="m">Weight：</td><td>{$infor.eweight}</td><td class="m">重量：</td><td>{$infor.weight}</td></tr>
                          <tr><td class="m">function：</td><td>{$infor.efunction}</td><td class="m">功能：</td><td>{$infor.function}</td></tr>
                      </tbody>
                  </table>
              </div>
              <div class=list>
                  {$infor.canshu|raw|default=''}
              </div>
              <div class="layui-btn review_btn" lay-on="page" style="float:left;background-color: rgb(0, 56, 101);padding-left:20px;padding-right:20px;line-height:35px;height:35px;font-size:16px">More Info</div>
            </div>
       </div>     
        
    </div>

 <script language="javascript" src="/static/swiper/swiper-bundle.min.js"></script>  
 <script>
     
  var layer = layui.layer;
  var util = layui.util;
  // 批量事件
  util.on('lay-on', {
      page: function(){
      layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
        console.log(pass);
        
      $.post('/index/index/check_pass',{id:{$infor.id|default=0},pass:pass},function(res){
          if(res.code=="y"){
               layer.close(index);
               
      layer.open({
        id:'mark',
        type: 1,
        area: ['420px', '240px'], // 宽高
        content: '<li>生产厂家 : '+res.company+'</li></li>价格 : '+res.price+'</li>'
      });
               
               
          }else{layer.msg('密码错误');}
      })
        /*layer.prompt({title: '文本输入框', formType: 2}, function(text, index){
          layer.close(index);
          alert('您输入的密令：'+ pass +'；文本：'+ text);
        });*/
      });
      }
      /*page: function(){
      $.post('/index/index/check_price',{id:{$infor.id|default=0}},function(res){
          console.log(res);
      layer.open({
        id:'mark',
        type: 1,
        area: ['420px', '240px'], // 宽高
        content: '<div class=tit>销售单价 : '+res+'</div>'
      });
      })
    },*/
  })
 </script>
 <script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        watchSlidesProgress: true,
      });
      var swiper2 = new Swiper(".mySwiper2", {
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        thumbs: {
          swiper: swiper,
        },
      });
    </script>
<script>
      
      $(document).on("mouseover",".mySwiper2",function(e){
          $(".mySwiper2 ").css('transform','scale(1)');
          $(this).css('transform','scale(1.5)');
      })
      
      $(document).on("mouseout",".mySwiper2",function(e){
          $(".mySwiper2").css('transform','scale(1)');
      })
  
  
</script>
</div>


</body>
 
</html>